<template>
  <div>
    <Navbar></Navbar>
    <div class="row rowhandle" style="padding-top: 50px">
      <div class="col-md-3"></div>
      <div class="col-md-6">
        <div class="panel panel-default">
          <div class="panel-heading">用户登录</div>
          <div class="panel-body">
            <form @submit.prevent="handleLogin">
              <div class="form-group" id="mail">
                <label for="email">登录邮箱</label>
                <input
                  type="email"
                  class="form-control"
                  v-model="user.userAccount"
                  id="email"
                  placeholder="请输入登录邮箱"
                />
              </div>
              <div class="form-group" id="pwd">
                <label for="pwd">密码</label>
                <div class="input-group">
                  <input
                    type="password"
                    class="form-control"
                    v-model="user.userPassword"
                    id="password"
                    placeholder="请输入6-20位密码"
                  />
                  <span class="input-group-btn">
                    <button class="btn btn-default" type="button" @click="showpwd">
                      <span :class="passwordIcon" aria-hidden="true"></span>
                    </button>
                  </span>
                </div>
              </div>

              <!--功能性按钮-->
              <div class="btn-toolbar" role="toolbar">
                <div class="btn-group" role="group">
                  <button type="submit" id="dologin" class="btn btn-primary">
                    &nbsp;登 录&nbsp;
                  </button>
                </div>
                <div class="btn-group" role="group">
                  <a type="button" class="btn btn-default" @click="forgetPassword">忘记密码</a>
                </div>
                <div class="btn-group" role="group">
                  <a type="button" class="btn btn-default" @click="toRegister"
                    >没有账号？点击注册</a
                  >
                </div>
              </div>

              <section>
                <!--第三方登录-->
                <div class="text-with-hr">
                  <span>第三方账号登录</span>
                </div>
                <div class="btn-group btn-group-justified" role="group">
                  <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default lr-btn" @click="login(2)">
                      <span class="github">&nbsp;&nbsp;&nbsp;&nbsp;</span>Github登录
                    </button>
                  </div>
                  <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default lr-btn" @click="login(3)">
                      <span class="qq">&nbsp;&nbsp;&nbsp;&nbsp;</span>QQ登录
                    </button>
                  </div>
                  <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default lr-btn" @click="login(4)">
                      <span class="gitee">&nbsp;&nbsp;&nbsp;&nbsp;</span>Gitee登录
                    </button>
                  </div>
                </div>
              </section>
            </form>
          </div>
        </div>
      </div>
      <div class="col-md-3"></div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import Navbar from '@/components/Navbar.vue'
import Footer from '@/components/Footer.vue'
import { useAuthStore } from '@/stores/auth'

const user = reactive({
  userAccount: '',
  userPassword: ''
})

const passwordIcon = ref('glyphicon glyphicon-eye-close')
const authStore = useAuthStore()
const router = useRouter()
//已登录，弹出提示框询问是否重新登录，重新登录则注销旧的登录信息,调logout方法，选否的话直接跳转至首页/

if (authStore.checkLogin()) {
  if (confirm('检测到登录信息，是否重新登录?')) {
    authStore.logout()
  } else {
    router.push('/')
  }
}
/**
 * 忘记密码
 */
function forgetPassword() {
  alert('请联系管理员找回')
}

/**
 * 跳转至注册页面
 */
function toRegister() {
  alert('跳转至注册页面')
  router.push('/user/register')
}
const inputinit = (event: Event) => {
  const target = event.target as HTMLInputElement
  target.closest('.form-group')?.classList.remove('has-error', 'has-success')
}

const showpwd = () => {
  if (passwordIcon.value === 'glyphicon glyphicon-eye-open') {
    passwordIcon.value = 'glyphicon glyphicon-eye-close'
    document.getElementById('password')?.setAttribute('type', 'password')
  } else {
    passwordIcon.value = 'glyphicon glyphicon-eye-open'
    document.getElementById('password')?.setAttribute('type', 'text')
  }
}

/**
 * 处理登录逻辑
 */
const handleLogin = async () => {
  await authStore.login(user.userAccount, user.userPassword)
}
</script>

<style scoped>
@import url('https://cdn.dijianggroup.com/static/bootstrap.min.css');
@import url('https://cdn.dijianggroup.com/static/ie10-viewport-bug-workaround.css');
@import url('@/assets/app.css?fzs=168');

.rowhandle {
  margin-top: 50px;
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.text-with-hr {
  text-align: center;
  position: relative;
  z-index: 2;
}
.text-with-hr:before {
  position: absolute;
  content: '';
  top: 20px;
  left: 0px;
  width: 100%;
  border-bottom: 1px solid #d4d4d4;
  z-index: -1;
}
.text-with-hr span {
  display: inline-block;
  background: white;
  padding: 10px;
}

.lr-btn span {
  background-image: url('@/assets/image/g_g_q.png');
}
.lr-btn .github {
  background-position: -18px 0;
}
.lr-btn .qq {
  background-position: 16px 0;
}
.lr-btn .gitee {
  background-position: 0 0;
}
</style>
